<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      pre {
        background-color: rgb(14, 13, 19);
      }
      .lanauage-html {
        
        color: rgb(153, 41, 52);
      }
      .OxEWNITQ {
        border-collapse: collapse; width: 100%;
        th,td {
          border: 1px solid black;
        }
      }
    </style>
  </head>
  <body>
    <input type="text" id="myInput" placeholder="请输入内容">
    <div>
      <button onclick="start()">发起ai会话--eventsource方式</button>
      <button onclick="start()">终止会话--eventsource方式</button>
    </div>
    <div>
      <button onclick="start2()">发起ai会话--fetch方式</button>
      <button onclick="stop2()">终止会话--fetch方式</button>
    </div>
    <div id="sse-output"></div>

    <br/><br/><br/><br/>
    1. 换行
      <!-- \n\n处理成<br/> -->
      <br/>
       nihao1
      <br/><br/>
      nihao2
      <br/>
     2. 代码 
     <!-- 接收  -->
     <!-- ```javascript
    let sum = 0;
    for(let i = 0; i < 10; i++) {
    sum += i;
    }
    console.log(sum);
    ``` -->
    <!-- 展示 或者用table显示 -->
    <pre>
      <code class="lanauage-html">
        let sum = 0;
        for(let i = 0; i < 10; i++) {
          sum += i;
        }
        console.log(sum);
      </code>

    </pre> 
     3. 表格
     <!-- 接收  -->
     <!-- | 姓名 | 年龄 | 性别 | 职业 |
    | --- | --- | --- | --- |
    | 张三 | 30 | 男 | 工程师 |
    | 李四 | 25 | 女 | 教师 |
    | 王五 | 35 | 男 | 医生 | -->
    <!-- 展示 -->
    <table class="OxEWNITQ">
      <thead><tr><th>数据格式</th><th>特点</th><th>示例</th></tr></thead>
      <tbody>
        <tr><td>文本</td><td>直观易懂，适合简单的自然语言回复</td><td>"今天天气晴朗，适合外出活动。"</td></tr>
        <tr><td>JSON</td><td>结构化数据，易于机器解析和生成</td><td>```json</td></tr>
        <tr><td></td><td></td><td></td></tr><tr><td>"text": "今天北京天气晴朗，气温在15到25度之间。",</td><td></td><td></td></tr>
        <tr><td>"metadata": </td><td></td><td></td></tr>
      </tbody>
    </table>
    <!-- 4. 处理1. 2. 3.举例情况 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.js"></script>
    <script>
            const sseOutput = document.getElementById('sse-output');

      const start = () => {
        var inputElement = document.getElementById('myInput');
        var inputValue = inputElement.value;
        console.log('start', inputValue)
        if(!inputValue) {
          return alert('请输入内容')
        }
        sseOutput.innerHTML = ''
        // 创建一个新的EventSource对象，并传入SSE端点的URL
        const eventSource = new EventSource('http://localhost:3004/ai/session/sse?key='+inputValue);
        
        // 监听'message'事件，当服务器发送新数据时触发
        eventSource.onmessage = function(event) {
            // 获取服务器发送的数据
            const data = event.data;
            let show = JSON.parse(data)
            console.log('获取的数据', data, data.content, show)
            // 将数据添加到页面上
            if(!(data && data.error))  {
              const sseOutput = document.getElementById('sse-output');
              let formattedData  =  show.content.replace(/\r?\n|\r/g, '<br>');
              sseOutput.innerHTML += formattedData ;
            } else {

            }
        };

        // 可选：监听'open'事件，当连接打开时触发
        eventSource.onopen = function(event) {
            console.log('SSE connection opened.');
        };

        // 可选：监听'error'事件，当连接出错时触发
        eventSource.onerror = function(event) {
            console.error('SSE error:', event);
            // 接收完消息必须手动关闭，否则会自动重连
            eventSource.close()
            const sseOutput = document.getElementById('sse-output');
            console.log('数据', sseOutput.innerText)
            // axios.get('http://localhost:3004/ai/stopsession')
            // 可以在这里尝试重新连接，或者显示错误消息给用户
        };

        eventSource.onclose = function(event) {
            console.error('SSE close:', event);
            // 可以在这里尝试重新连接，或者显示错误消息给用户
        };

        // 当页面关闭时，关闭EventSource连接
        window.onbeforeunload = function() {
            eventSource.close();
        };
      }

      const stop = () => {
        axios.get('http://localhost:3004/ai/stopsession')
      }

      let controller = new AbortController()
      let signal = controller.signal;

      let flag = true
      let chatStr = ''

      const start2 = () => {
        var inputElement = document.getElementById('myInput');
        var inputValue = inputElement.value;
        console.log('start', inputValue)
        if(!inputValue) {
          return alert('请输入内容')
        }
                sseOutput.innerHTML = ''
        fetch('http://localhost:3004/ai/session/fetch?key='+inputValue , {
          signal: signal,
          headers: {
            // 'Content-Type': 'application/json'
          },
        })
        .then((response) => {
          const reader = response.body.getReader();
          const decoder = new TextDecoder("utf-8");
          let buffer = "";
 
          function processStreamResult(result) {
            const chunk = decoder.decode(result.value, { stream: !result.done });
            buffer += chunk;
            //逐条解析后端返回数据
            const lines = buffer.split("\n");
            buffer = lines.pop();
 
            // 判断是否中断此条消息生成，设置一个标志位,flag为true继续输出为false中断
            if (flag) {
              lines.forEach((line) => {
                console.log('line', line)
                if (line.slice(0,5) == 'data:') {
                  let data = JSON.parse(line.slice(5))
                  let formattedData  =  data.content.replace(/\r?\n|\r/g, '<br>');
                  sseOutput.innerHTML += formattedData
                }
              });
            } else {
              //中断此条消息生成后，你的逻辑代码
            }
            if (!result.done) {
              return reader.read().then(processStreamResult);
            }
          }
          return reader.read().then(processStreamResult);
        })
        .catch((error) => {
          console.error("Error:", error);
        });
      }
      const stop2 = () => {
        signal.aborted()
      }

    </script>
  </body>
</html>
